;; (function () {
  //选项卡
  var nav = document.querySelector('.details_t_l_l');
  var oNav = nav.getElementsByTagName('li');
  // 大盒子
  var container = document.getElementById('content');
  var oDiv = container.getElementsByTagName('img');
  var bigbox = document.getElementById("bigbox");
  var smallbox = document.getElementById("smallbox");
  window.addEventListener("load", card);
  var detailli = document.querySelectorAll(".detailli");
  var parameter = "";
  for (let i = 0; i < detailli.length; i++) {
    detailli[i].index = i;
    detailli[i].onclick = function () {
      for (var i = 0; i < detailli.length; i++) {
        detailli[i].className = '';
      }
      this.className = 'act';
      this.children[0].style.color = "#000";
      parameter = this.children[0].innerHTML;
    }

  }

  var aindex = null;
  var images = [
    "./images/detail1.jpg",
    "./images/detail2.jpg",
    "./images/detail3.jpg",
    "./images/detail4.jpg",
  ]
  function card() {
    for (var i = 0; i < oNav.length; i++) {
      oNav[i].index = i;
      oNav[i].onclick = function () {
        for (var i = 0; i < oNav.length; i++) {
          oNav[i].className = '';
          oDiv[i].style.display = "none";
        }
        this.className = 'act';
        aindex = this.index;
        oDiv[this.index].style.display = "block"
      }
      for (var m = 1; m < oNav.length; m++) {
        oNav[m].className = '';
        oDiv[m].style.display = "none";
      }
    }
  };
  // 放大镜
  function Magnifier() { }
  Magnifier.prototype.init = function (bigbox, container, smallbox, oDiv) {
    this.bigbox = bigbox;
    this.container = container;
    this.smallbox = smallbox;
    this.oDiv = oDiv;
    //console.log(this.oDiv);
    this.events();
  }
  Magnifier.prototype.events = function () {
    this.container.addEventListener("mouseenter", this.show.bind(this));
    this.container.addEventListener("mouseleave", this.leave.bind(this));
    this.container.addEventListener("mousemove", this.move.bind(this));
  }
  Magnifier.prototype.show = function () {

    this.bigbox.style.display = "block";
    this.smallbox.style.display = "block";
    for (let i = 0; i < oDiv.length; i++) {
      //console.log(oDiv[i].style.display);
      if (oDiv[i].style.display === "block") {
        //console.log(i);
        this.smallbox.style.backgroundImage = `url(${images[i]})`;
        this.bigbox.style.backgroundImage = `url(${images[i]})`;
      }
    }
  }

  // 节流问题？？？？？？
  // 移动问题
  Magnifier.prototype.move = function (evt) {
    let e = evt || window.event;
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    let clientX = e.clientX;
    let clientY = e.clientY;
    let aleft = $(this.container).parent()[0].offsetLeft;
    let atop = $(this.container).parent()[0].offsetTop;
    //console.log(clientY, atop, this.smallbox.offsetHeight / 2);
    let nleft = clientX - aleft - this.smallbox.offsetWidth / 2;
    let ntop = scrollTop + clientY - atop - this.smallbox.offsetHeight / 2;

    //边缘判断
    let lmax = this.container.offsetWidth - this.smallbox.offsetWidth;
    let tmax = this.container.offsetHeight - this.smallbox.offsetHeight;
    nleft = nleft < 0 ? 0 : nleft;
    ntop = ntop < 0 ? 0 : ntop;
    ntop = ntop > tmax ? tmax : ntop;
    nleft = nleft > lmax ? lmax : nleft;
    this.smallbox.style.left = nleft + "px";
    this.smallbox.style.top = ntop + "px";
    //小框的背景图进行移动----背景的写法注意!不能忘了加px!!!!
    this.smallbox.style.backgroundPosition = `-${nleft}px -${ntop}px`;
    //右边的大框要进行背景移动-----要乘以放大倍数!
    this.bigbox.style.backgroundPosition = `-${nleft * 3}px -${ntop * 3}px`;
  }
  Magnifier.prototype.leave = function () {

    this.bigbox.style.display = "none";
    this.smallbox.style.display = "none";
  }
  var magnifier = new Magnifier();
  magnifier.init(bigbox, container, smallbox, oDiv);


  // 加入购物袋功能
  // 加减的功能
  var addcount = $.Callbacks();
  var reducecount = $.Callbacks();
  addcount.add(addnumber);
  reducecount.add(reducenumber);
  var content = $(".d_t_r_car_add");

  var smallcar = $(".d_t_r_car_join");
  var carnumber = $(".carnumber");
  // 单方面页面数字的变化
  // 加内容
  var a = 0;
  function addnumber() {
    var content_p = $(this).parent();
    var a3 = content_p.find(".a3");
    var count = Number(a3.text());
    //  console.log(content_p);
    var co = count + 1;
    //a++;
    a3.text(co);

  }
  // 减内容 
  var co = 0;
  function reducenumber() {
    var content_p = $(this).parent();
    var a3 = content_p.find(".a3");
    var count = Number(a3.text());
    //  console.log(content_p);
    //var id = content_p.attr("s_id");

    if (count <= 0) {
      co = 0;
    } else {
      co = count - 1;
    }
    a3.text(co);
    //content_p.attr("count", co);
    //var a = count - co;
    //console.log(a);
    //car_s_s(-a);
  }

  // 获取当前页面信息
  var news = {}
  var h1 = document.getElementById("h1").innerHTML;
  var a3 = document.querySelector(".a3");
  var mainimg = document.querySelector(".mainimg").src;
  var place = $(".d_t_r_car_place span").html();
  function gainnews() {
    news = {
      "h1": h1,
      "parameter": parameter,
      "a3": a3,
      "mainimg": mainimg,
      "place": place
    }
    console.log("调>>");
    // 设置内容
    window.localStorage.setItem("newsinfo", JSON.stringify(news));
    changecar();
    
  }

  // 改购物车价格-------------------------------------
  var carspan = Number(carnumber.text());
  function changecar() {
    carspan++;
    carnumber.text(carspan);
    if (carspan != 0) {
      $(".s_content").html("您的圣罗兰购物袋有货，请到购物袋查看");
    }
  }

  function init() {
    bindEvent();
  }
  init();
  // 事件区：
  function bindEvent() {
    content.on("click", ".addcount", addcount.fire);
    content.on("click", ".reducecount", reducecount.fire);
    smallcar.on("click", gainnews);
  }
  // 获取cookie   
  function getCookie(key) {
    var _cookie = document.cookie;
    // "key=value; key2=value; key3=value";
    var _cookie_item = _cookie.split("; ");
    var _key = [];
    var _value = _cookie_item.map(item => {
      var _temp = item.split("=");
      _key.push(_temp[0]);
      return _temp[1];
    })
    var index = _key.indexOf(key);
    if (index !== -1) {
      return _value[index];
    }
    return "";
  }
  // function renderHTML() {
  //   let cookieValue = getCookie("username");
  //   var text = document.getElementById("loginreg");
  //   text.innerHTML = cookieValue;
  // }
  // renderHTML();
})();